<template>
  <div style="margin-top: 21px">
    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <TreeTools :data="condata" />
      <hr>
      <el-tree :data="pagData" default-expand-all>
        <template #default="obj">
          <TreeTools
            :data="obj.data"

            @editDpartment="editDpartment"
            @addDpartment="addDpartment"
          />
        </template>
      </el-tree>
      <AddDept :show-dialog="showDialog" :node-data="nodeData" />
    </el-card>

  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
import { getConpemtList } from '@/api/getConpemntLits'
import { listTOTreeData } from '@/utils/index'
import AddDept from './components/AddDpartment.vue'
export default {
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      condata: {
        name: ' 江苏传智播客教育科技股份有限公司 '
      },
      pagData: [],
      showDialog: false,
      nodeData: {}
    }
  },
  async created() {
    const { depts } = await getConpemtList()

    this.pagData = listTOTreeData(depts, '')
    //console.log(22, this.pagData)
  },
  methods: {
    addDpartment(nodeData) {
      this.showDialog = true
      this.nodeData = nodeData
    },
    editDpartment() {
      this.showDialog = true
    }
  }
}
</script>

<style>

</style>
